葫芦的运维日志

下一篇 搜索 上一篇

---

一.合并在一起的main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home'
import Menu from './components/Menu'
import Admin from './components/Admin'
import About from './components/about/About'
import Login from './components/Login'
import Register from './components/Register'

//二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OderingGuide from './components/about/OderingGuide'

// 三级路由
import Person from './components/about/contact/PersonName'
import PhoneNumber from './components/about/contact/Phone'

Vue.use(VueRouter)

const routes = [
  {path: '/', component: Home},
  {path: '/menu', name: "menulink", component: Menu},
  {path: '/admin', name: "adminlink", component: Admin},
  {
    path: '/about', name: "aboutlink", redirect: '/about/contact', component: About, children: [
      {
        path: '/about/contact', name: "contactLink", redirect: '/personname', component: Contact, children: [
          {path: '/phone', name: "phoneNumber", component: PhoneNumber},
          {path: '/personname', name: "personName", component: Person}

        ]
      },
      {path: '/history', name: "historyLink", component: History},
      {path: '/delivery', name: "deliveryLink", component: Delivery},
      {path: '/oderingguide', name: "oderingGuideLink", component: OderingGuide},
    ]
  },
  {path: '/login', name: "loginlink", component: Login},
  {path: '/register', name: "registerlink", component: Register},
  {path: "*", redirect: '/'}
]
const router = new VueRouter({
  routes,
  mode: 'history'

})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

二,抽离后的router.js和main.js

router.js

import Home from './components/Home'
import Menu from './components/Menu'
import Admin from './components/Admin'
import About from './components/about/About'
import Login from './components/Login'
import Register from './components/Register'

//二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OderingGuide from './components/about/OderingGuide'

// 三级路由
import Person from './components/about/contact/PersonName'
import PhoneNumber from './components/about/contact/Phone'


export const routes = [
  {path: '/', components: {

    default:Home,
      'oderingGuide':OderingGuide,
      'delivery':Delivery,
      'history':History
    }

    },
  {
    path: '/menu', name: "menulink", component: Menu, beforeEnter: (to, from, next) => {
      alert("非登录状态不能进入此页面！");
      next('/login');
    }
  },
  {path: '/admin', name: "adminlink", component: Admin},
  {
    path: '/about', name: "aboutlink", redirect: '/about/contact', component: About, children: [
      {
        path: '/about/contact', name: "contactLink", redirect: '/personname', component: Contact, children: [
          {path: '/phone', name: "phoneNumber", component: PhoneNumber},
          {path: '/personname', name: "personName", component: Person}

        ]
      },
      {path: '/history', name: "historyLink", component: History},
      {path: '/delivery', name: "deliveryLink", component: Delivery},
      {path: '/oderingguide', name: "oderingGuideLink", component: OderingGuide},
    ]
  },
  {path: '/login', name: "loginlink", component: Login},
  {path: '/register', name: "registerlink", component: Register},
  {path: "*", redirect: '/'}
]

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from './router'

Vue.use(VueRouter)


const router = new VueRouter({
  routes,
  mode: 'history'

})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇